<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="设备品牌" prop="equipmentName">
            <el-select v-model.trim="filterForm.equipmentName" placeholder="请选择设备品牌" filterable>
              <el-option
                v-for="item in equipmentNameList"
                :key="item.id"
                :label="item.equipmentName"
                :value="item.equipmentName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="型号" prop="equipmentModel">
            <el-input v-model.trim="filterForm.equipmentModel" placeholder="请输入型号">
            </el-input>
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button type="primary" @click="handleFilter">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <dt-table
        ref="dtTable"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
      >
      </dt-table>
    </div>
    <brandFormModel ref="brandForm" @success="refresh" />
  </div>
</template>

<script>
import brandFormModel from './components/brandFormModel'
import { getPageVideoEquipment, getEquipmentName, delEquipment } from '@/api/videoFusion/brandMaintenance'
import { countSystemAndEquipment } from '@/api/videoFusion/upstreamAccess'

export default {
  components: { brandFormModel },
  data() {
    return {
      systemList: [],
      filterForm: {
        equipmentName: '',
        equipmentModel: '',
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      total: 0,
      equipmentNameList: [],
      tableOpts: {
        rowKey: 'id',
        toolbarBtn: [
          {
            label: '新增',
            permission: ['BRANDMAINTENANCE_ADD_BUTTON'],
            type: 'primary',
            icon: 'el-icon-plus',
            click: () => {
              this.handleAdd()
            }
          }
        ],
        tableData: [],
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          index: true
        },
        tableCol: [
          {
            prop: 'equipmentName',
            label: '设备品牌',
            show: true
          },
          {
            prop: 'equipmentModel',
            label: '型号',
            show: true
          },
          {
            prop: 'jarClass',
            label: '视频处理CLASS',
            show: true
          }
        ],
        operator: {
          width: 292,
          operatorBtn: [
            {
              text: '修改',
              permission: ['BRANDMAINTENANCE_UPDATE_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.editInfo(row) }
            },
            {
              text: '删除',
              permission: ['BRANDMAINTENANCE_DEL_BUTTON'],
              size: 'small',
              type: 'danger',
              click: (row, col, cellValue) => { return this.remove(row) }
            }
          ]
        }
      }
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    refresh() {
      this.getList()
      this.getEquipmentName()
    },
    handleAdd() {
      this.$refs.brandForm.add()
    },
    editInfo(row) {
      countSystemAndEquipment({ equipmentId: row.id }).then((res) => {
        if (res.data.equipmentNum > 0) {
          this.$dtModal.confirm('存在使用该品牌型号的摄像头监控，是否继续修改？').then(() => {
            this.$refs.brandForm.edit(row)
          })
        } else {
          this.$refs.brandForm.edit(row)
        }
      })
    },
    remove(row) {
      countSystemAndEquipment({ equipmentId: row.id }).then((res) => {
        if (res.data.equipmentNum > 0) {
          this.$dtModal.msgWarning('系统中存在使用该品牌型号的摄像头监控，不允许删除')
        } else {
          this.$dtModal.confirm('是否删除选择的设备信息？').then(() => {
            return delEquipment({
              id: row.id,
              ids: [row.id]
            })
          }).then(() => {
            this.refresh()
            this.$dtModal.msgSuccess('删除成功')
          }).catch(() => {})
        }
      })
    },
    // 搜索
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    getList() {
      this.loading = true
      getPageVideoEquipment(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getEquipmentName() {
      getEquipmentName().then((res) => {
        this.equipmentNameList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
